<template>
  <div>
    <!-- 頭部 -->
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      title="我来接单"
    > </van-nav-bar>

    <!-- body -->
    <div
      class="code-body"
      v-if="user"
    >
      <div class="card">
        <div class="card-left">
          <van-image
            radius="4"
            width="40"
            height="40"
            :src="user.avatar"
          />
        </div>
        <div
          class="card-right"
          v-if="delData"
        >
          <div class="title">
            <h1>{{ user.userName }}</h1>
            <span>{{user.opDepartmentPositionName}}</span>
            <div class="teg-right">
              <div></div>
              <van-tag
                size="large"
                :color="colorTag.color"
                :text-color="colorTag.textcolor"
                class="important-tag"
              >{{UrgentLevel}}</van-tag>
            </div>
          </div>
          <div
            class="context"
            v-if="delData.content"
          >
            <MyContext2
              :t="delData.content"
              :styleType="commentStyle"
            ></MyContext2>
          </div>

          <div
            class="img-body"
            v-if="delData.taskResourceList && delData.taskResourceList.length > 0"
          >
            <MyImgs :imgData='delData.taskResourceList'></MyImgs>
          </div>
          <div
            class="card-tabbar"
            v-if="delData"
          >
            <span>{{Ac_statusForTime(delData)}}</span>
          </div>
        </div>
      </div>
      <div
        class="cyz"
        v-if="delData.taskAcceptList && delData.taskAcceptList.length > 0"
      >
        <font
          v-for="acceptUser in delData.taskAcceptList"
          :key="acceptUser"
        >
          {{ acceptUser.userName }},
          <font style="color: #999">{{ delData.taskAcceptList.length }}人已接单</font>
        </font>
      </div>
    </div>
    <!-- 任务类型 -->
    <div
      class="card-list"
      style="margin-top: 0.2rem"
    >
      <h1>任务类型</h1>
      <LabelsBox
        :data="labelsBoxData"
        @run-parent="getChild"
        class="jd-labels"
      ></LabelsBox>
    </div>
    <!-- 任务类型 -->
    <div class="card-list">
      <h1>重要程度</h1>
      <div class="rate">
        <van-rate
          style="margin-top: 0.4rem"
          v-model="formData.importentLevel"
          :size="24"
          color="#FDAA01"
          void-icon="star"
          void-color="#999999"
        />
      </div>
    </div>
    <div class="card-list" style="padding:0">
      <van-field
        v-model="formData.remark"
        type="textarea"
        placeholder="请填备注说明 (选填)"
        maxlength="300"
        show-word-limit
      />
    </div>
    <div
      style="height: 8rem; background: #fff"
      v-if="delData.isAllowAccept == 1"
    >
      <van-button
        class="submit"
        type="primary"
        size="big"
        @click="onSubmit"
      >提交</van-button>
    </div>
  </div>
</template>
<style lang="less">
.jd-labels{
  .labels{
    .C,.C-Sel{
      margin-bottom: 0 !important;
    }
  }
}
</style>
<style lang="less" scoped>
@zi: 24px;
@h-zi: 32px;

.code-body {
  background: #fff;
  padding: 30px;
  .cyz {
    text-align: left;
    background: #f1f1f1;
    color: #576b95;
    font-size: 26px;
    padding: 20px;
  }
}
.card {
  background: #fff;
  display: flex;
  margin-bottom: 30px;
  .card-left {
    overflow: hidden;
    width: 15%;
  }
  .card-right {
    text-align: left;
    width: 85%;
    padding-right: 30px;
    .title {
      display: flex;
      h1 {
        margin-left: 15px;
        font-size: @h-zi;
      }
      span {
        color: #999999;
        font-size: @zi;
        padding-left: 6px;
        padding-top: 5px;
      }
      .teg-right {
        position: absolute;
        right: 40px;
      }
    }
    .context {
      padding: 30px;
    }

    .card-tabbar {
      padding-left: 10px;
      height: 30px;
      color: #999999;
      font-size: 24px;
      margin-top: 30px;
      span {
        line-height: 30px;
      }
      .button {
        margin-top: -8px;
        background: #288ef4;
        color: #ffffff;
        font-size: 28px;
        float: right;
        margin-right: 30px;
        padding: 10px 19px;
        border-radius: 8px;
        div {
          height: 40px;
        }
      }
    }
    .task-comment {
      margin-top: 40px;
      margin-right: 30px;
      background: #f7f7f7;
      .head {
        padding: 20px;
        font-size: 26px;
        color: #576b95;
        border-bottom: 1px solid #e8e8e8;
      }
      .body {
        padding: 20px;
        .comment-list {
          padding: 10px;
        }
      }
    }
  }
}
.card-list {
  background: #fff;
  display: flex;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
  .rate{
    margin-top: -5px;
  }
  h1 {
    font-size: 32px;
    line-height: 100px;
    margin-right: 20px;
  }
}
.code-px {
  margin-left: 30px;
  text-align: left;
  padding: 26px;
  font-size: 26px;
  color: #666666;
  span {
    float: right;
    margin-right: 30px;
    color: #288ef4;
    img {
      width: 24px;
      height: 24px;
      padding-left: 5px;
    }
  }
}
.submit {
  width: 90%;
  text-align: center;
  margin: 30px;
}
</style>
<script>
import {
  Button,
  Icon,
  NavBar,
  Tabs,
  Tab,
  Rate,
  Tabbar,
  TabbarItem,
  Image as VanImage,
  tag,
  field,
  Dialog,
  Toast
} from "vant";
import { useRouter } from "vue-router";
import httpRequest from "../../util/httpRequest";
import maps from "../../util/maps";
import MyContext2 from "@/components/task/context2.vue";
import MyImgs from "@/components/task/Imgs.vue";
import LabelsBox from "@/components/labelsBox.vue";

export default {
  components: {
    [Button.name]: Button,
    [Icon.name]: Icon,
    [NavBar.name]: NavBar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [VanImage.name]: VanImage,
    [tag.name]: tag,
    [Rate.name]: Rate,
    [field.name]: field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    MyContext2,
    MyImgs,
    LabelsBox
  },
  data() {
    return {
      colorTag: {},
      router: useRouter(),
      delData: {},
      user: {},
      commentStyle: "comment",
      formData: {},
      labelsBoxData: {
        titel: "",
        status: 1,
        styleType: "C",
        lebType: "taskType",
        labels: maps.taskTypeLabMap
      }
    };
  },
  computed: {
    UrgentLevel() {
      return maps.urgentLevelMap[this.delData.urgentLevel];
    },
    Ac_statusForTime() {
      return item => {
        return maps.getTimer(item);
      };
    }
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.formData.taskId = this.router.currentRoute.query.taskId;
    httpRequest
      .post("任务详情", { taskId: this.router.currentRoute.query.taskId })
      .then(res => {
        this.delData = res.data;
        this.user = this.delData.createUser;
        this.commentStyle = "comment";
        this.colorTag = maps.urgentLevelColorMap[this.delData.urgentLevel];
      });
  },
  methods: {
    onClickLeft() {
      if (
        this.formData.remark ||
        this.formData.taskType ||
        this.formData.importentLevel
      ) {
        Dialog.confirm({
          message: "退出编辑后内容不会保留"
        }).then(() => {
          this.$router.back();
        });
      } else {
        this.$router.back();
      }
    },
    getChild(data) {
      this.formData.taskType = data.id;
    },
    onSubmit() {
      // console.log(this.formData);
      if (this.formData.taskType && this.formData.importentLevel) {
        // eslint-disable-next-line no-unused-vars
        httpRequest.post("接单任务", this.formData).then(res => {
          if(res.resultCode === "000000"){
            Toast.success("接单任务成功！");
            this.$router.back();
          }
        });
      } else {
        !this.formData.taskType ? Toast.fail("请选择任务类型再提交文案！"):'';
        !this.formData.importentLevel ? Toast.fail("请选择重要程度再提交文案！"):'';
      }
    }
  }
};
</script>
